<template>
  <div>
    <!-- 警告框 -->
    <el-alert :closable="false" title="注意：只允许为第三级分类设置相关参数！" type="warning" show-icon>
    </el-alert>
    <!-- 级联选择器 -->
    <el-row style="margin-top:15px">
      <el-col>
        <span>选择商品分类：</span>
        <!-- 选择器 -->
        <el-cascader clearable v-model="cateKeyList" :options="cateList" :props="{ expandTrigger: 'hover',value:'cat_id',label:'cat_name' }" @focus="getCateList" @change="handleChange"></el-cascader>
      </el-col>
    </el-row>
    <!-- tab页切换 -->
    <el-tabs v-model="activeName" @tab-click="handleTagClick">
      <el-tab-pane label="动态参数" name="first">
        <dynamic :sel="'many'" :btnTitle="'添加参数'" :btStatus="btStatus" :cateId="cateId"></dynamic>
      </el-tab-pane>
      <el-tab-pane label="静态属性" name="second">
        <dynamic :sel="'only'" :btnTitle="'添加属性'" :btStatus="btStatus" :cateId="cateId"></dynamic>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Dynamic from '@/comment/goods/Dynamic.vue'
export default {
  components: { Dynamic },
  name: 'params',
  data() {
    return {
      cateKeyList: [],
      cateList: [],
      // 当前tab选择的名称
      activeName: 'first'
    }
  },
  methods: {
    // 获取商品分类
    async getCateList() {
      const { data: res } = await this.$api.goods.getCatesApi()
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.cateList = res.data
      console.log(this.cateList)
    },
    // 当选择器发生改变时
    handleChange(value) {
      if (value.length !== 3) {
        this.cateKeyList = []
      }
    },
    // 当切换tab页时
    handleTagClick() {}
  },
  computed: {
    // 按钮是否启用
    btStatus() {
      if (this.cateKeyList.length !== 3) {
        return true
      }
      return false
    },
    // 选中的id
    cateId() {
      if (this.cateKeyList.length === 3) return this.cateKeyList[2]
      return 0
    }
  }
}
</script>

<style lang="less" scoped>
</style>
